export default {
  bind(el, binding, vnode, oldVnode) {
    // 初始非全屏
    let isFullScreen = false;

    // 当前宽高
    let nowWidth = 0;
    let nowHight = 0;

    // 当前顶部高度
    let nowMarginTop = 0;

    // 弹窗对象
    const dragDom = el.querySelector('.el-dialog');

    // 获取弹框头部（这部分可双击全屏）
    const dialogHeaderEl = el.querySelector('.el-dialog__header');
    let hasSetBodyHight = false;
    
    // 设置-弹框内容的高度(因为此时弹框body还未加载，所以此处需要加一个定时器)
    setTimeout(() => {
      if(dragDom.querySelector('.el-dialog__body')){
        // 获取底部高度
        let footerElHeight = dragDom.querySelector('.el-dialog__footer') ? dragDom.querySelector('.el-dialog__footer').offsetHeight : 0;
        dragDom.querySelector('.el-dialog__body').style.maxHeight = 'calc(95vh - '+(footerElHeight + 30)+'px)';
      }
    }, 200);

    let moveDown = null;
    if(binding.value && binding.value.drag == true){
      // 给弹窗加上overflow:hidden 不然缩小时框内的标签可能超出dialog；
      dragDom.style.overflow = "hidden";

      // 清除选择头部文字效果
      dialogHeaderEl.onselectstart = new Function("return false");

      // 头部加上可拖动cursor
      dialogHeaderEl.style.cursor = 'move';

      // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
      const getStyle = (function() {
        if (window.document.currentStyle) {
          return (dom, attr) => dom.currentStyle[attr]
        } else {
          return (dom, attr) => getComputedStyle(dom, false)[attr]
        }
      })()


      // 拖动
      moveDown = (e) => {
        // 鼠标按下，计算当前元素距离可视区的距离
        const disX = e.clientX - dialogHeaderEl.offsetLeft
        const disY = e.clientY - dialogHeaderEl.offsetTop

        const dragDomWidth = dragDom.offsetWidth
        const dragDomHeight = dragDom.offsetHeight

        const screenWidth = document.body.clientWidth
        const screenHeight = document.body.clientHeight

        const minDragDomLeft = dragDom.offsetLeft
        const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;

        const minDragDomTop = dragDom.offsetTop
        const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight;

        // 弹框被拖出底部保留的高度 默认表头的高度55
        const saveHeight = 55;
        // 弹框被拖左右部保留的宽度
        const saveWidth = 55;

        // 获取到的值带px 正则匹配替换
        let styL = getStyle(dragDom, 'left')
        let styT = getStyle(dragDom, 'top')

        if (styL.includes('%')) {
          styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
          styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
        } else {
          styL = +styL.replace(/\px/g, '')
          styT = +styT.replace(/\px/g, '')
        }
        
        document.onmousemove = function(e) {
          // 通过事件委托，计算移动的距离
          let left = e.clientX - disX
          let top = e.clientY - disY

          // 边界处理
          if (-(left) > minDragDomLeft + (dragDomWidth - saveWidth)) {
            left = -(minDragDomLeft + (dragDomWidth - saveWidth));
          } else if (left > maxDragDomLeft + (dragDomWidth - saveWidth)) {
            left = maxDragDomLeft + (dragDomWidth - saveWidth);
          }

          if (-(top) > minDragDomTop) {
            top = -minDragDomTop;
          } else if (top > maxDragDomTop + (dragDomHeight - saveHeight)) {
            top = maxDragDomTop + (dragDomHeight - saveHeight); 
          }

          // 移动当前元素
          dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`

          // emit onDrag event
          vnode.child.$emit('dragDialog')
        }

        document.onmouseup = function(e) {
          document.onmousemove = null
          document.onmouseup = null
        }
      }
      // 弹框头部-绑定拖动事件
      dialogHeaderEl.onmousedown = moveDown;
    }


    // 最大/最小化
    if(binding.value && binding.value.full == true){
      // 头部插入最大化最小化元素
      let maxMin = document.createElement("button");
      maxMin.className +=' el-dialog__headerbtn el-dialog__minmax';
      maxMin.style.right = '40px';
      maxMin.style.color = '#909399';
      maxMin.title = '最大化';
      maxMin.innerHTML = '<i class="el-icon-full-screen" onMouseOver="this.style.color=\'#409EFF\'" onMouseOut="this.style.color=\'inherit\'"></i>';
      dialogHeaderEl.insertBefore(maxMin, dialogHeaderEl.childNodes[1]);
      
      let bodyHeight = 'auto';
      function setMaxMin(){
        if (isFullScreen == false) {// 当前未最大化
          let i = maxMin.querySelector('.el-icon-full-screen');
          i.classList.remove('el-icon-full-screen');
          i.classList.add('el-icon-crop');
          maxMin.title = '还原';
          bodyHeight = dragDom.querySelector('.el-dialog__body').offsetHeight+'px';
          nowHight = dragDom.clientHeight;
          nowWidth = dragDom.clientWidth;
          nowMarginTop = dragDom.style.marginTop;
          dragDom.style.left = 0;
          dragDom.style.top = 0;
          dragDom.style.height = "100VH";
          dragDom.style.width = "100VW";
          dragDom.style.marginTop = 0;

          isFullScreen = true;
          dialogHeaderEl.style.cursor = 'initial';
          dialogHeaderEl.onmousedown = null;
          if(!hasSetBodyHight) {
            // 获取底部高度
            let footerElHeight = dragDom.querySelector('.el-dialog__footer') ? dragDom.querySelector('.el-dialog__footer').offsetHeight : 0;

            dragDom.querySelector('.el-dialog__body').style.height = 'calc(100% - '+dialogHeaderEl.offsetHeight+'px - '+footerElHeight+'px)';
            hasSetBodyHight = true;
          }

          // 调用内部元素自适应高度方法
          if(binding.value.resizeWinFun) binding.value.resizeWinFun('win');
        } else {
          let i = maxMin.querySelector('.el-icon-crop');
          i.classList.remove('el-icon-crop');
          i.classList.add('el-icon-full-screen');
          maxMin.innerHTML = '<i class="el-icon-full-screen"></i>';
          maxMin.title = '最大化';
          dragDom.style.height = "auto";
          dragDom.style.width = nowWidth + 'px';
          dragDom.style.marginTop = nowMarginTop;
          isFullScreen = false;
          dialogHeaderEl.style.cursor = 'move';
          dialogHeaderEl.onmousedown = moveDown;
          // dragDom.querySelector('.el-dialog__body').style.height = bodyHeight;
          hasSetBodyHight = false;

          // 调用内部元素自适应高度方法
          if(binding.value.resizeWinFun) binding.value.resizeWinFun();
        }
      }
      // 点击放大缩小效果
      maxMin.onclick = setMaxMin;
      // 双击头部效果
      dialogHeaderEl.ondblclick = setMaxMin;
    }
    
    if(binding.value && binding.value.resize == true){
      // 弹框可拉伸最小宽高
      let minWidth = 400;
      let minHeight = 100;
      // 拉伸
      let resizeEl = document.createElement("div");
      dragDom.appendChild(resizeEl);
      // 在弹窗右下角加上一个10-10px的控制块
      resizeEl.style.cursor = 'se-resize';
      resizeEl.style.position = 'absolute';
      resizeEl.style.height = '10px';
      resizeEl.style.width = '10px';
      resizeEl.style.right = '0px';
      resizeEl.style.bottom = '0px';
      resizeEl.style.zIndex = '99999';

      // 鼠标拉伸弹窗
      resizeEl.onmousedown = (e) => {
        // 记录初始x位置
        const clientX = e.clientX;
        // 鼠标按下，计算当前元素距离可视区的距离
        const disX = e.clientX - resizeEl.offsetLeft;
        const disY = e.clientY - resizeEl.offsetTop;

        // 弹框-横向偏移
        const dragDomLeft = dragDom.offsetLeft;
        // 弹框-纵向偏移
        const dragDomTop = dragDom.offsetTop;

        // 可视区域-宽度
        const screenWidth = document.body.clientWidth;
        // 可视区域-高度
        const screenHeight = document.body.clientHeight;

        document.onmousemove = function (e) {
          e.preventDefault(); // 移动时禁用默认事件

          // 通过事件委托，计算移动的距离(这里 由于elementUI的dialog控制居中的，所以水平拉伸效果是双倍)
          let width = e.clientX - disX;
          let height = e.clientY - disY;

          /*****调整弹框不会拉伸出可视区域--begin******/
          let maxPro = 0.8; // 弹框最大拉伸区域占浏览器可视区域多少百分比
          // 1.拉伸宽度不能大于可视区域宽度80%
          if(width > screenWidth*maxPro) width = screenWidth*maxPro;
          if(width < minWidth) width = minWidth;

          // 2.拉伸高度不能大于可视区域高度80%
          if(height > screenHeight*maxPro) height = screenHeight*maxPro;
          if(height < minHeight) height = minHeight;

          dragDom.style.width = `${width}px`;   // 设置-弹框-宽度
          dragDom.style.height = `${height}px`; // 设置-弹框-高度

          // 弹框偏移量始终保持点击拉伸的时候不变
          dragDom.style.left =  `0px`;
          dragDom.style.top = `-100px`; // 根据elementui的默认弹框有外边距调整


          /*****调整弹框不会拉伸出可视区域--end*******/

          if(!hasSetBodyHight) {
            // 获取底部高度
            let footerElHeight = dragDom.querySelector('.el-dialog__footer') ? dragDom.querySelector('.el-dialog__footer').offsetHeight : 0;

            dragDom.querySelector('.el-dialog__body').style.height = 'calc(100% - '+dialogHeaderEl.offsetHeight+'px - '+footerElHeight+'px)';
            hasSetBodyHight = true;
          }

        };

        // 拉伸结束
        document.onmouseup = function (e) {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      }
    }

  },
  update(el, binding, vnode, oldVnode){
    // 弹窗对象
    const dragDom = el.querySelector('.el-dialog');
    
    // 如果弹框顶部超过了浏览器可视区域，则弹框顶部偏移量位置为0
    dragDom.style.top = `0px`; // 根据elementui的默认弹框有外边距调整

    // 设置-弹框内容的高度
    if(dragDom.querySelector('.el-dialog__body')){
      // 获取底部高度
      let footerElHeight = dragDom.querySelector('.el-dialog__footer') ? dragDom.querySelector('.el-dialog__footer').offsetHeight : 0;
      dragDom.querySelector('.el-dialog__body').style.maxHeight = 'calc(95vh - '+footerElHeight+'px)';
    }

  }


}